<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增商品类别')" />
    <th:block th:include="include :: datetimepicker-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-type-add">
            <!--<form id="addForm" role="form" class="form-horizontal parsley-form" data-parsley-validate-->
            <!--action="${base!}/platform/goods/type/addDo" method="post">-->
            <input type="hidden" id="isPhysical" name="isPhysical" value="1">
            <input type="hidden" id="hasBrand" name="hasBrand" value="1">
            <input type="hidden" id="hasParam" name="hasParam" value="1">
            <input type="hidden" id="hasSpec" name="hasSpec" value="1">
            <div class="wrapper" style="min-height:500px;">
                <div class="box-tab">
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#base" data-toggle="tab">基本设置</a>
                        </li>
                        <!--<li><a href="#props" data-toggle="tab">扩展属性</a>-->
                        <!--</li>-->
                        <li><a href="#spec" data-toggle="tab">规格</a>
                        </li>
                        <li><a href="#params" data-toggle="tab">详细参数表</a>
                        </li>
                    </ul>
                    <div class="tab-content text-center">
                        <div class="tab-pane fade active in" id="base">
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label for="name" class="col-sm-2 control-label">类型名称</label>
                                    <div class="col-sm-8">
                                        <input type="text" id="name" class="form-control" name="name" data-parsley-required="true"
                                               value="" placeholder="类型名称" required="required">
                                    </div>
                                </div>

                                <!-- <div class="form-group">
                                    <label for="brand" class="col-sm-2 control-label">关联品牌</label>
                                    <div class="col-sm-8" id="brand">
                                        <div style="float: left;height: 35px;line-height: 35px;" >
                                            <span th:each="bList : ${brandList}" >
                                                <input type="checkbox" th:value="${bList.id}" name="brand" value="" required="required">
                                                <span th:text="${bList.name}"></span>
                                            </span>
                                        </div>
                                    </div>
                                </div> -->

                            </div>
                        </div>
                        <!--<div class="tab-pane fade" id="props">-->
                        <!--<div class="form-group">-->
                        <!--<div class="col-sm-2">-->
                        <!--<button id="propsAdd" type="button" class="btn btn-default"><i class="fa fa-plus mr5"></i>添加扩展属性</button>-->

                        <!--</div>-->
                        <!--<div class="col-sm-8">-->
                        <!--</div>-->
                        <!--</div>-->
                        <!--<div class="form-group">-->
                        <!--<label for="propsTab" class="col-sm-2 control-label"></label>-->
                        <!--<div class="col-sm-8">-->
                        <!--<table id="propsTab" width="100%" border="0" cellspacing="0" cellpadding="0" >-->
                        <!--<thead>-->
                        <!--<tr align="center">-->
                        <!--<td>属性名称</td>-->
                        <!--<td width="2"></td>-->
                        <!--<td>展现形式</td>-->
                        <!--<td width="2"></td>-->
                        <!--<td>选项管理</td>-->
                        <!--<td></td>-->
                        <!--<td>操作</td>-->
                        <!--</tr>-->
                        <!--</thead>-->
                        <!--<TBODY>                  　-->
                        <!--　-->
                        <!--</TBODY>-->
                        <!--</table>-->
                        <!--</div>-->
                        <!--</div>-->
                        <!--</div>-->
                        <div class="tab-pane fade" id="spec">
                            <div class="form-group">
                                <div class="col-sm-2">
                                    <button id="specAdd" type="button" class="btn btn-primary"><i class="fa fa-plus mr5"></i>选择规格</button>

                                </div>
                                <div class="col-sm-8">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="specTab" class="col-sm-2 control-label"></label>
                                <div class="col-sm-8">
                                    <table id="specTab" width="100%" border="0" cellspacing="0" cellpadding="0" >
                                        <thead>
                                        <tr align="center">
                                            <td>规格名称</td>
                                            <td>规格值</td>
                                            <td width="2"></td>
                                            <td>操作</td>
                                        </tr>
                                        </thead>
                                        <TBODY>                  　
                                        　
                                        </TBODY>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="params">

                            <div class="form-group">
                                <div class="col-sm-2">
                                    <button id="dialogParamAdd" type="button" class="btn btn-primary"><i class="fa fa-plus mr5"></i>添加选项参数值</button>
                                </div>
                                <div class="col-sm-8">
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="dialogParamTab" class="col-sm-2 control-label"></label>
                                <div class="col-sm-8">
                                    <table id="dialogParamTab" width="100%" border="0" cellspacing="0" cellpadding="0" >
                                        <thead>
                                        <tr align="center">
                                            <td>选项值</td>
                                            <td width="2"></td>
                                            <td>操作</td>
                                        </tr>
                                        </thead>
                                        <TBODY>                  　
                                        　
                                        </TBODY>
                                    </table>
                                </div>
                            </div>

                        </div>

                    </div>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <script type="text/javascript">
        var prefix = ctx + "system/type"
        $("#form-type-add").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/add", $('#form-type-add').serialize());
            }
        }

        $("#dialogParamAdd").on("click",function(){
            $("#dialogParamTab tbody").append('<tr align="center"><td height="45">' +
                '<input type="text" name="group_params" class="form-control"></td>' +
                '<td width="2"></td>' +
                '<td><i class="up fa fa-arrow-up" style="cursor:pointer;padding: 5px;" title="向上移动"></i>' +
                '<i class="down fa fa-arrow-down" style="cursor:pointer;padding: 5px;" title="向下移动"></i>' +
                '<i class="del fa fa-remove" style="cursor:pointer;padding: 5px;" title="删除"></i></td></tr>');
            binDialogGroupEvent();
        });

        $("#specAdd").on("click",function(){
            layer.open({
                type:2,
                title:"选择规格",
                area : [ '400px', '450px' ],
                content:"/system/spec/spec"
            });
        });

        function binDialogGroupEvent(){
            $("#dialogParamTab .up").unbind("click").on("click",function(){
                var p=$(this).parent().parent();
                var nextTR = p.prev();
                if (nextTR.length > 0) {
                    nextTR.insertAfter(p);
                }
            });
            $("#dialogParamTab .down").unbind("click").on("click",function(){
                var p=$(this).parent().parent();
                var nextTR = p.next();
                if (nextTR.length > 0) {
                    nextTR.insertBefore(p);
                }
            });
            $("#dialogParamTab .del").unbind("click").on("click",function(){
                var tr=$("#dialogParamTab tbody").find("tr");
                if (tr.length > 0) {
                    $(this).parent().parent().remove();
                }
            });
        }
        // 参数 end
        function binSpecEvent(){
            $("#specTab .up").unbind("click").on("click",function(){
                var p=$(this).parent().parent();
                var nextTR = p.prev();
                if (nextTR.length > 0) {
                    nextTR.insertAfter(p);
                }
            });
            $("#specTab .down").unbind("click").on("click",function(){
                var p=$(this).parent().parent();
                var nextTR = p.next();
                if (nextTR.length > 0) {
                    nextTR.insertBefore(p);
                }
            });
            $("#specTab .del").unbind("click").on("click",function(){
                var tr=$("#specTab tbody").find("tr");
                if (tr.length > 0) {
                    $(this).parent().parent().remove();
                }
            });
        }
        function loadSpec(str) {
            $("#specTab tbody").append(str);
            binSpecEvent();
        }


    </script>
</body>
</html>